<template>
  <div class="back"><back></back></div>
  <h2>订单详情</h2>

  <div class="box">
    <div class="list">
      <div class="left"><van-icon name="orders-o" /></div>
      <div class="flex">
        <div>
          <h3>订单号 : &nbsp;<span>25526623330033</span></h3>
          <span>下单时间 : &nbsp;2022.12.06</span>
        </div>
        <span class="copy" @click="copyToast">复制</span>
      </div>
    </div>

    <div class="list">
      <div class="left"><van-icon name="location-o" /></div>
      <div class="flex">
        <div>
          <h3>TC_ZY &nbsp;<span>15205058585</span></h3>
          <span>贵州省贵阳市云岩区</span>
        </div>
      </div>
    </div>

    <div class="list">
      <div class="left"><van-icon name="shopping-cart-o" /></div>
      <div class="flex">
        <div>
          <h3>平板电脑</h3>
          <span>黑色 x1</span>
        </div>
        <span class="right"><van-icon name="arrow" /></span>
      </div>
    </div>

    <div class="list">
      <div class="left"><van-icon name="gold-coin-o" /></div>
      <div class="flex">
        <div>
          <h3 class="mony">实付 :&nbsp;<span>1299.99</span>元</h3>
          <span>快递运费 :&nbsp;0.00元</span>
        </div>
      </div>
    </div>
  </div>

  <van-button
    round
    type="primary"
    class="bottom-button"
    color=" #999"
    @click="toast"
    >查看物流信息</van-button
  >
</template>

<script setup>
// 返回按钮
import back from "@/components/Back.vue";

import { showToast } from "vant";

// 查看物流信息按钮
function toast() {
  showToast("暂无物流信息");
}

// 复制的提示框
function copyToast() {
  showToast("复制成功");
}
</script>

<style lang="less" scoped>
h2 {
  line-height: 1;
  font-size: 4.533vw;
  font-weight: 600;
  margin-bottom: 8.267vw;
  margin-left: 5.067vw;
}

.bottom-button {
  position: absolute;
  bottom: 14vw;
  left: 5vw;
  width: 90%;
  height: 10.333vw;
  border-radius: 2vw;
}
.back {
  margin-left: -5.067vw;
}
.box {
  padding: 0 5.067vw;
  .list {
    width: 100%;
    height: 22.2vw;
    border-bottom: 0.267vw solid #ccc;
    div {
      float: left;
    }
    .left {
      width: 10vw;
      font-size: 6vw;
      height: 22.2vw;
      line-height: 22.2vw;
    }
    .flex {
      width: calc(100% - 12vw);
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      h3 {
        font-size: 2.667vw;
        font-weight: 600;
        line-height: 1;
        margin-bottom: 1vw;
      }
      .mony {
        color: #ff3c50;
        font-weight: 900;
      }
      span {
        font-size: 2.667vw;
        line-height: 1;
      }
      .copy {
        width: 11vw;
        height: 5vw;
        background-color: #ff3c50;
        border-radius: 1vw;
        line-height: 5vw;
        text-align: center;
        color: #fff;
        font-size: 2vw;
        margin-top: -7.333vw;
      }
      .right {
        font-weight: 900;
        color: #333;
        font-size: 5.333vw;
      }
    }
  }
}
</style>
